<script lang="ts" setup>
import { Dialog, Field } from 'vant'
import { ContactApi } from '~/api/ContactApi';
import { Common } from '~/common'
import type { ContactModel } from '~/model/ContactModel'

const props = defineProps<{
  consumer?: ContactModel | null
  modelValue: boolean
  source?: ContactModel[]
}>()

const emits = defineEmits([
  'update:consumer',
  'update:modelValue',
])

const searchInput = ref('')
const allContacts = ref([] as ContactModel[])
const aliasMap = ref(new Map<string, string>())
const materialsFiltered = computed(() => {
  if (!searchInput.value) {
    return allContacts.value
  }
  else {
    const getAlias = (x: ContactModel) => aliasMap.value.get(`${x.name}${x.phone}`) || ''
    return allContacts.value.filter(x => getAlias(x).includes(searchInput.value))
  }
})

function chooseItem(item: ContactModel) {
  emits('update:consumer', item)
  close()
}

onMounted(async () => {
  // 获取订单，根据客户的订单数进行客户排序
  // const allOrder = await OrderApi.getAll()
  // const counter = new Map<string, number>()
  // for (const order of allOrder) {
  //   const consumer = order.consumer as ContactModel
  //   const sigature = `${consumer.name}${consumer.phone}`
  //   const oldVal = counter.get(sigature)
  //   if (oldVal === undefined) {
  //     counter.set(sigature, 1)
  //   }
  //   else {
  //     counter.set(sigature, oldVal + 1)
  //   }
  // }
  if (props.source) {
    console.log('contact pick is using source:', props.source)
    allContacts.value = props.source
  }
  else {
    allContacts.value = await ContactApi.getWithIsConsumer()
  }

  // allContacts.value.sort((a, b) => {
  //   const ka = counter.get(`${a.name}${a.phone}`) || 0
  //   const kb = counter.get(`${b.name}${b.phone}`) || 0
  //   return kb - ka
  // })

  // 计算alias
  for (const contact of allContacts.value) {
    const _alias = Common.genAlias(contact)
    aliasMap.value.set(`${contact.name}${contact.phone}`, _alias)
  }
  // console.log(aliasMap.value)
})

function close() {
  emits('update:modelValue', false)
}

watch (() => props.source, (val) => {
  if (val) {
    allContacts.value = val
    // 计算alias
    for (const contact of allContacts.value) {
      const _alias = Common.genAlias(contact)
      aliasMap.value.set(`${contact.name}${contact.phone}`, _alias)
    }
    console.log(aliasMap.value)
  }
})
</script>

<template>
  <div>
    <Dialog
      :show="modelValue"
      title="选择用户"
      width="80%"
      :show-confirm-button="false"
      :close-on-click-overlay="true"
      @update:show="$emit('update:modelValue', $event)"
    >
      <div p2>
        当前: {{ consumer ? consumer.name : '-' }}
      </div>
      <Field v-model="searchInput" mb2 bg-light-5 />
      <div h-30vh flex flex-wrap of-auto bg-gray-1 text-center>
        <div
          v-for="(item, index) in materialsFiltered"
          :key="index"
          p2
          style="width:50%"
          b-b="1 solid gray-3"
          @click="chooseItem(item)"
        >
          <span>{{ item.name }}</span>
          <br>
          <span c-gray-4>{{ item.phone }}</span>
        </div>
      </div>
    </Dialog>
  </div>
</template>

<style scoped>

</style>
